<template>
  <sar-calendar-input
    :model-value="datetime"
    v-bind="attrs"
    @update:model-value="updateModelValue"
  ></sar-calendar-input>
</template>

<script lang='ts' setup>
import Dayjs from 'dayjs'

interface Props {
  modelValue: string
  valueFormat?: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  valueFormat: 'YYYY-MM-DD HH:mm:ss',
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const attrs = useAttrs()

const datetime = computed(() => {
  return props.modelValue ? new Date(props.modelValue) : new Date()
})

function updateModelValue(value: string) {
  emit('update:modelValue', Dayjs(value).format(props.valueFormat))
}
</script>

<style lang='scss' scoped>

</style>
